<template>
	<!-- tab切换 -->
<div class="nav-position">
	<van-tabs 
		v-model:active="active" animated
		color="#f6cc4a"
		title-inactive-color="#848688"
		title-active-color="#242629"
		class="co-tab-view"
		@click-tab="onClickTab"
	>
	<van-tab title-class="co-title-tab"
	v-for="(item,index) in tabNav" :title="item.city" :key="index"
	>
	</van-tab>
	</van-tabs>
	<!-- 筛选标签 -->
	<div class="activity-type global-display global-a-items">
		<p v-for="(item,index) in activityType" :key="index"
		@click="activityFun(item,index)"
		:class="index == select ? 'selectstyle' : ''"
		>{{item}}</p>
	</div>
</div>
<div class="nav-height"></div>
	<!-- 发布人 -->
	<van-list
	  v-model:loading="loading"
	  :finished="finished"
	  finished-text="没有更多了"
	  :immediate-check="false"
	  offset="100"
	  @load="onLoad">
	<div class="companion-view" v-for="(item,index) in companionData" :key="index" @click="juMp(item._id)">
		<div class="companion-name global-display global-a-items">
			<img :src="item.author_data[0].avatarUrl" class="fadeIn">
			<div>
				<p>{{item.author_data[0].nickname}}</p>
				<p>{{item.timestamp}}</p>
			</div>
		</div>
		<div class="companion-title text-show">{{item.description}}</div>
		<div class="companion-time global-display global-a-items">
			<img src="@/icon/concern/time.png" alt="">
			<p>时间：&nbsp;{{item.companion_time}}</p>
		</div>
		<div class="companion-time global-display global-a-items">
			<img src="@/icon/concern/address.png" alt="">
			<p>地点：&nbsp;{{item.city}} {{item.full_address}}</p>
		</div>
		<div class="companion-image" v-for="(item_a,index_a) in item.image" :key="index_a">
			<img :src="item_a" @click.stop="showImage(item.image,index_a)" class="fadeIn">
		</div>
		<div class="companion-people">{{item.signups}}人已报名</div>
	</div>
	<!-- 如果没有数据 -->
	<van-empty
		v-if="exist"
		image="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/icon/kong-zhuang-tai.png"
		image-size="80"
		description="没有更多啦"
	/>
	</van-list>
	<div style="height: 200px;"></div>
	<div class="sign-up other-up" @click="initPartner">发布活动</div>
</template>

<script setup>
	import {ref,onMounted, watch} from 'vue'
	import request from '@/api/request.js'
	// 图片预览
	import { showImagePreview } from 'vant';
	import { useRouter } from 'vue-router'
	const $router = useRouter()  // 这是路由跳转的
	// 标签切换索引值
	const active = ref(0);
	// 存储结伴城市
	const tabNav = ref([])
	// 存储结伴数据
	const companionData = ref([])
	// 是否有数据
	const exist = ref(false)
	// 筛选类型
	const activityType = ref(['全部','本月出发','下月出发','我的活动'])
	// 请求数据
	onMounted(async()=>{
		// 获取结伴城市
		const tabRes = await request.get('/companion_city');
		tabNav.value = tabRes.data
		// 进入页面获取全部结伴数据
		const companionRes = await request.get('/companion_query',
		{city:'推荐',keyword:'全部',page:1}
		);
		exist.value = companionRes.data.length > 0 ? false : true
		companionData.value = companionRes.data
		console.log(companionRes);
	})
	//类型筛选
	const select = ref(0)
	// 存储选中值
	const keyWord = ref('全部')
	async function activityFun(val,index){
		if(index != 3){
			select.value = index
			keyWord.value = val
		}else{
			// 查询是否登录
			await request.get('/check_login');
			$router.push({path: '/my-activities'})
		}
	}
	// 选择城市切换
	const cityWord = ref('推荐')
	function onClickTab(event){
		cityWord.value = event.title
	}
	// 如果选中城市切换或类型，并且都不为空
	watch([keyWord,cityWord],async(newVal,oldVal)=>{
		page.value = 1
		loading.value = false
		finished.value = false
		const companionRes = await request.get('/companion_query',
		{city:cityWord.value,keyword:keyWord.value,page:1}
		);
		exist.value = companionRes.data.length > 0 ? false : true
		companionData.value = companionRes.data
	})
	// 上啦加载
	const loading = ref(false);
	const finished = ref(false);
	const page = ref(1)
	async function onLoad(){
		page.value++
		const companionRes = await request.get('/companion_query',
		{city:cityWord.value,keyword:keyWord.value,page:page.value}
		);
		companionData.value = [...companionData.value,...companionRes.data]
		loading.value = false
		if(companionRes.data.length === 0){
			finished.value = true
		}
	}
	// 预览图片
	function showImage(image,index_a){
		showImagePreview({
		  images: image,
		  startPosition: index_a,
		});
	}
	// 跳转详情
	async function juMp(_id){
		// 查询是否登录
		await request.get('/check_login');
		$router.push({path: '/partner-details', query: {_id}})
	}
	// 跳转发布活动
	function initPartner(){
		$router.push({path: '/Init-partner'})
	}
</script>

<style>
@import url('@/style/index.css');
.nav-height{
	height: 91px;
}
.co-title-tab{
	font-weight: bold;
	font-size: 16px;
}
.co-tab-view .van-tabs__line{
	width: 30px; height: 5px;
}
.activity-type {
	padding: 10px;
	background-color: #ffffff;
}
.activity-type p{
	margin-right: 10px;
	font-size: 13px;
	font-weight: bold;
	background-color: #f5f6f6;
	padding: 5px 10px;
	border-radius: 4px;
}
.activity-type p:last-child{
	margin-left: auto;
	margin-right: 0;
}
.selectstyle{
	background-color: #fceeae !important;
}

</style>